class Tabs {
    constructor(id) {

        this.main = document.querySelector(id) //id相当于形参

        this.lis = this.main.querySelectorAll('.firstNav li')

        this.sections = this.main.querySelectorAll('.tabscon section')

        this.init() // 调用
    }
    // 初始化绑定事件
    init() {
        this.lis.forEach((item,index )=> {
            item.addEventListener('click', this.toggleTabs.bind(this,item,index))  //改变this的指向
        })
    }

 
    // 清除所有class
    clearClass() {
        this.lis.forEach((item,index) => {
            item.className = '' //清除
            this.sections[index].className = ''
        })
    }
    // 切换功能
    toggleTabs(li, index) {
        this.clearClass()  // 调用上面的清除所有class方法。
        
        li.className = 'liactive'  //li就相当于改变this里面item的参数传过来

        this.sections[index].className ='conactive'
    }  

    // 添加功能
    addTabs() {
        this.clearClass()
        let li =`<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>`
        
        let section = ` <section class="conactive">测试1</section>`

        this.ul.insertAdjacentHTML('beforeend', li)

        this.sectionFather.nsertAdjacentHTML('beforeend', section)

        this.init()
    }
}


new Tabs('#tab') //里面是实参